<script setup lang="ts">
import { watch,onMounted } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { useRouterPush } from '@/hooks/common/router';

const { routerPushByKey } = useRouterPush();


defineOptions({
  name: 'PieChart'
});

const appStore = useAppStore();
const nodes = [
  {
    name: '电网',
    itemStyle: {
      color: '#5AAEF4',
    },
    label: {
      position: 'right',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '光伏',
    itemStyle: {
      color: '#5B6E96',
    },
    label: {
      position: 'right',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '燃气',
    itemStyle: {
      color: '#FFE88E',
    },
    label: {
      position: 'right',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '电',
    itemStyle: {
      color: '#61D9AC',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '照明',
    itemStyle: {
      color: '#A8E0FB',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '电梯',
    itemStyle: {
      color: '#ffdc4c',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: 'OA设备',
    itemStyle: {
      color: '#fc9850',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '电脑及实验设备',
    itemStyle: {
      color: '#e55a55',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '其他设备',
    itemStyle: {
      color: '#6d62e4',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '高效机房',
    itemStyle: {
      color: '#6c9ae7',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '自然冷源',
    itemStyle: {
      color: '#4a6fe2',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '分布式风冷',
    itemStyle: {
      color: '#22c2da',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '空调冷',
    itemStyle: {
      color: '#fc6e6c',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '热水',
    itemStyle: {
      color: '#f4ec59',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '空调热',
    itemStyle: {
      color: '#ffb64d',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '办公',
    itemStyle: {
      color: '#5aaef4',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '酒店',
    itemStyle: {
      color: '#61d9ac',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '商业',
    itemStyle: {
      color: '#5b6e96',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
  {
    name: '运动',
    itemStyle: {
      color: '#a8e0fb',
    },
    label: {
      position: 'left',
      textStyle: {
        fontSize: 18,
        fontWeight: 800,
        color: '#666666',
      },
    },
  },
];
const links = [
  {
    source: '电网',
    target: '电',
    value: 50,
  },
  {
    source: '光伏',
    target: '电',
    value: 1.5,
  },
  {
    source: '燃气',
    target: '空调热',
    value: 3,
  },
  {
    source: '电',
    target: '照明',
    value: 10,
  },
  {
    source: '电',
    target: '电梯',
    value: 5,
  },
  {
    source: '电',
    target: 'OA设备',
    value: 5,
  },
  {
    source: '电',
    target: '电脑及实验设备',
    value: 5,
  },
  {
    source: '电',
    target: '高效机房',
    value: 5,
  },
  {
    source: '电',
    target: '分布式风冷',
    value: 2,
  },
  {
    source: '燃气',
    target: '热水',
    value: 2,
  },
  {
    source: '高效机房',
    target: '空调冷',
    value: 10,
  },
  {
    source: '空调冷',
    target: '热水',
    value: 2,
  },
  {
    source: '分布式风冷',
    target: '空调冷',
    value: 5,
  },
  {
    source: '分布式风冷',
    target: '空调热',
    value: 2,
  },
  {
    source: '照明',
    target: '办公',
    value: 2,
  },
  {
    source: '电梯',
    target: '办公',
    value: 2,
  },
  {
    source: 'OA设备',
    target: '办公',
    value: 2,
  },
  {
    source: '电脑及实验设备',
    target: '办公',
    value: 2,
  },
  {
    source: '电',
    target: '其他设备',
    value: 2,
  },
  {
    source: '其他设备',
    target: '办公',
    value: 2,
  },
  {
    source: '电',
    target: '自然冷源',
    value: 0,
  },
  {
    source: '自然冷源',
    target: '空调冷',
    value: 2,
  },
  {
    source: '热水',
    target: '办公',
    value: 2,
  },
  {
    source: '热水',
    target: '酒店',
    value: 2,
  },
  {
    source: '热水',
    target: '商业',
    value: 2,
  },
  {
    source: '热水',
    target: '运动',
    value: 2,
  },
  {
    source: '空调冷',
    target: '热水',
    value: 2,
  },
  {
    source: '空调冷',
    target: '办公',
    value: 2,
  },
  {
    source: '空调冷',
    target: '酒店',
    value: 2,
  },
  {
    source: '空调冷',
    target: '商业',
    value: 2,
  },
  {
    source: '空调冷',
    target: '运动',
    value: 2,
  },

  {
    source: '空调热',
    target: '办公',
    value: 2,
  },
  {
    source: '空调热',
    target: '酒店',
    value: 2,
  },
  {
    source: '空调热',
    target: '商业',
    value: 2,
  },
  {
    source: '空调热',
    target: '运动',
    value: 2,
  },
];
const { domRef, updateOptions,getChart } = useEcharts(() => ({
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove',
  },
  series: {
    type: 'sankey',
    layout: 'none',
    top: 50,
    left: 50,
    right: 50,
    nodeGap: 14,
    layoutIterations: 0, // 自动优化列表，尽量减少线的交叉，为0就是按照数据排列
    data: nodes, // 节点
    links: links, // 节点之间的连线
    draggable: false,
    focusNodeAdjacency: 'allEdges', // 鼠标划上时高亮的节点和连线，allEdges表示鼠标划到节点上点亮节点上的连线及连线对应的节点
    // tooltip: {
    //   formatter: function(params) {
    //     if (params.data.source) {
    //       return `${params.data.source}：${params.data.value}`;
    //     } else {
    //       return `${params.name}：${params.value}`;
    //     }
    //   }
    // },
    levels: [
      {
        depth: 0,
        itemStyle: {
          color: '#F27E7E',
        },
        lineStyle: {
          color: 'source',
          opacity: 0.2,
        },
      },
      {
        depth: 1,
        lineStyle: {
          color: 'source',
          opacity: 0.2,
        },
      },
      {
        depth: 2,
        lineStyle: {
          color: 'source',
          opacity: 0.2,
        },
      },
      {
        depth: 3,
        label: {
          fontSize: 12,
        },
      },
    ],
    label: {
      fontSize: 14,
      color: '#666',
    },
    itemStyle: {
      normal: {
        borderWidth: 0,
      },
    },
  },
}));
const targetNodes = ['办公', '酒店', '商业', '运动'];
async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });

  updateOptions(opts => {
    // opts.series[0].data = [
    //   { name: $t('page.home.study'), value: 20 },
    //   { name: $t('page.home.entertainment'), value: 10 },
    //   { name: $t('page.home.work'), value: 40 },
    //   { name: $t('page.home.rest'), value: 30 }
    // ];

    return opts;
  });
  const chart =getChart()
  // console.log(chart);

  chart?.on('click', function (params:any) {
    // console.log(params);
    if (params.componentType === 'series' && params.seriesType === 'sankey') {
      if (targetNodes.includes(params.name)) {
        console.log('点击了目标节点：', params.name);
        // 在这里执行你的业务逻辑
        routerPushByKey('demo-route_child2')
      }
    }
  });

}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory();
    console.log(originOpts);

    // opts.series[0].name = originOpts.series[0].name;

    // opts.series[0].data = [
    //   { name: $t('page.home.study'), value: 20 },
    //   { name: $t('page.home.entertainment'), value: 10 },
    //   { name: $t('page.home.work'), value: 40 },
    //   { name: $t('page.home.rest'), value: 30 }
    // ];

    return opts;
  });
}

async function init() {
  mockData();
}




onMounted(() => {

});


watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);

// init
init();
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <div ref="domRef" class="h-500px overflow-hidden"></div>
  </ACard>
</template>

<style scoped></style>
